<template>
    <div id='myApp' class="page_all">
        <Row style="margin-bottom: 40px;border-bottom: 1px solid #eeeeee;">
            <Col span="7" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">网站管理&nbsp;&nbsp;>&nbsp;&nbsp;API列表&nbsp;&nbsp;>&nbsp;</span>查看API
            </span>
            </Col>
        </Row>
        <Row>
            <Layout>
                <Sider hide-trigger width="210" :style="{background: '#fff'}">
                    <Button type="primary" style="width: 100%; margin-bottom: 10px;" @click="toCreatapi">新建接口</Button>                    
			        <div class="api_leftmenu">
			        	<ul class="ivu-menu ivu-menu-light ivu-menu-vertical">
			        		<li v-for="(item,index) in menuData" 
                            :key="item.id"
			        		:class="['ivu-menu-item',{'ivu-menu-item-active ivu-menu-item-selected':item.id==currentId}]" 
			        		>
			        			<div class="menu_li">
				        			<div class="links" @click="openmenu(item.id,0)">
				        				<p class="menuname">{{item.name}}</p>
				        				<p class="weburl">{{item.url}}</p>
				        			</div>
				        			<div class="toolbar">
				        				<Icon type="ios-create-outline" size="18" @click="openmenu(item.id,1)" />				        				
				        				<Poptip
									        confirm
									        title="你确定要删除吗?"
									        :transfer="true"
									        @on-ok="deleteApi(item.id)">
									        <Icon size="18" type="ios-trash-outline" />
									    </Poptip>
				        			</div>
			        			</div>
			        		</li>                    		
			        	</ul>
			        </div>
                </Sider>
               
                <Content :style="{padding: '0 24px', minHeight: '280px', background: '#fff'}">
                    <Row>
                        <Col span="8">
                        <h4 style="color: #2d8cf0;">{{currentDetail.name}}</h4>
                        </Col>
                        <Col span="6" offset="10">
                        <div style="float: right;">
                            <!-- <Button>移动/复制</Button> -->
                            <div v-if="toggleStatus==false">
                            	<Button type="primary" icon="md-create" @click="openEditor">编辑</Button>
                            </div>
                            <div v-else>
                            	<Button type="primary" @click="saveApi">保存</Button>
                            	<Button type="default" @click="openmenu(currentId,0)">取消</Button>
                            </div>
                            
                        </div>
                        </Col>
                    </Row>
                    <div v-show="toggleStatus==false">
	                    <p class="viewapi_sublabel">简要描述：{{currentDetail.desc}}</p>
	                    <p class="viewapi_sublabel">请求URL：<a style="color: #2d8cf0;">{{currentDetail.url}}</a></p>
	                    <p class="viewapi_sublabel">请求方式：{{currentDetail.httpMethod}}</p>
                        <p class="viewapi_sublabel">状态：{{currentDetail.enabled==true?'开启':'关闭'}}</p>
                        <p class="viewapi_sublabel">刷新频率：{{currentDetail.frequency}}分钟</p>
	                    <br>
                        <div class="viewapi_links">
							<div>
							  <div class="ivu-anchor-wrapper">
							    <div class="ivu-anchor">
							      <div class="ivu-anchor-link" v-for="(ele,idx) in anchorList1" :key="idx" @click="goAnchor('#temp_'+idx)">
							        <span title="SQL模板" class="ivu-anchor-link-title">{{ele}}</span> 
							      </div> 
							    </div>
							  </div>
							</div>
                        </div>
                        <div class="scroll_panel">
	                        <div class="temp_items" id="temp_0">
	                            <Row>
	                                <Col span="8">
	                                   <span class="temp_title">SQL模板：</span>
	                                </Col>
	                                <Col span="6" offset="10">
	                                    
	                                </Col>
	                            </Row>
	                            <div class="items_body">
	                                <pre>{{currentDetail.sqlTemplate}}</pre>
	                            </div>
	                        </div>
	                        <div class="temp_items" id="temp_1">
			                    <Row style="margin: 10px 0;">
			                        <Col span="8">
			                           <span style="font-weight: bold;">请求参数：</span>
			                        </Col>
			                        <Col span="6" offset="10">
		    	                        <div style="float: right;">
		    	                            
		    	                        </div>
			                        </Col>
			                    </Row>
			                    <Table :columns="requestsColumnsView" :data="requestsParams"></Table>
		                	</div>
		                    <div class="temp_items" id="temp_2">
		                    	<Row>
	                                <Col span="8">
	                                   <span class="temp_title">请求模板：</span>
	                                </Col>
	                                <Col span="6" offset="10">
	                                    
	                                </Col>
	                            </Row>
		                    	<div class="items_body">
<pre>
{{JSON.stringify(paramsResponse)}}
</pre>
				            	</div>
				        	</div>
				        	<div class="temp_items" id="temp_3">
			                    <Row style="margin: 10px 0;">
			                        <Col span="8">
			                            <span style="font-weight: bold;">响应参数：</span>
			                        </Col>
			                        <Col span="6" offset="10">
				                        <div style="float: right;">
				                            
				                        </div>
			                        </Col>
			                    </Row>
			                    <Table :columns="responseColumns" :data="responseParams"></Table>
			                </div>
			                <div class="temp_items" id="temp_4">
			                    <Row style="margin: 10px 0;">
			                        <Col span="8">
			                        响应模板：
			                        </Col>
			                    </Row>
			                    <div class="items_body">
<!-- <pre>
{{JSON.stringify(currentDetail.response)}}
</pre> -->
<div v-if="currentDetail.response!=null">
<json-view :data="currentDetail.response"/>
</div>
					            </div>
				        	</div>
				            <div class="temp_items" id="temp_5">
	                            <Row>
	                                <Col span="8">
	                                   <span class="temp_title">注意事项：</span>
	                                </Col>
	                                <Col span="6" offset="10">
	                                    
	                                </Col>
	                            </Row>
	                            <div class="items_body">
	                                {{currentDetail.remark}}
	                            </div>
	                        </div>

                    	</div>
                        
                    </div>
	                <div v-show="toggleStatus==true">
	                	<div class="api_editpage" style="padding-top: 20px;">
						    <Form :model="formItems" ref="formValidate" :label-width="100">
						    	<input type="hidden" :value="formItems.name" />
						        <FormItem label="地址：">
						            <Input v-model="formItems.url" disabled></Input>
						        </FormItem>
						        <div class="form_items">
						        	<div class="form_subitem">
						        		<FormItem label="请求方式：">
								            <Select v-model="formItems.httpMethod" style="width:200px">
										        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
										    </Select>
								        </FormItem>
						        	</div>

						        	<div class="form_subitem">
						        		
						        	</div>
						        </div>
						        <FormItem label="刷新频率：">
						            <Input type="number" v-model="formItems.frequency"><span slot="append">分钟</span></Input>
						        </FormItem>
						        <FormItem label="简介：">
						            <Input type="textarea" :autosize="{minRows: 1,maxRows: 5}" v-model="formItems.desc"></Input>
						        </FormItem>
						        <div class="temp_items">
		                            <Row style="margin: 10px 0;">
		                                <Col span="8">
		                                   <span class="temp_title">SQL模板：</span>
		                                </Col>
		                                <Col span="6" offset="10">
		                                    
		                                </Col>
		                            </Row>
		                            <div class="items_body">
<div style="border: 1px solid #ccc;">
    <codemirror
      ref="myCm"
      v-model="formItems.sqlTemplate"
      :options="cmOptions"
      class="code">
    </codemirror>
</div>

		                            </div>
		                        </div>
		                        <div class="temp_items">
						            <Row style="margin: 10px 0;">
				                        <Col span="8">
				                            <span>请求参数：</span>
				                        </Col>
				                        <Col span="6" offset="10">
					                        <div style="float: right;">

					                        </div>
				                        </Col>
				                    </Row>
				                    <Table 
				                     :columns="requestsColumns" 
				                     :data="editQequestsParams">
				                    </Table>
						        </div>
						        <div class="temp_items" v-if="formItems.response!== undefined">
				                    <Row style="margin: 10px 0;">
		                                <Col span="8">
		                                   <span class="temp_title">请求模板：</span>
		                                </Col>
		                                <Col span="6" offset="10">
		                                    
		                                </Col>
		                            </Row>
		                            <div class="items_body">
<pre>
{{JSON.stringify(paramsResponse)}}
</pre>
		                            </div>
							    </div>
							    <div class="temp_items">
				                    <Row style="margin: 10px 0;">
		                                <Col span="8">
		                                   <span class="temp_title">响应参数：</span>
		                                </Col>
		                                <Col span="6" offset="10">
		                                    
		                                </Col>
		                            </Row>
		                            <div class="items_body">
		                                <Table :columns="responseColumns" :data="responseParams"></Table>
		                            </div>
							    </div>

							    <div class="temp_items">
				                    <Row style="margin: 10px 0;">
		                                <Col span="8">
		                                   <span class="temp_title">响应模板：</span>
		                                </Col>
		                                <Col span="6" offset="10">
		                                    
		                                </Col>
		                            </Row>
		                            <div class="items_body">
		                                <!-- <Input type="textarea" :autosize="{minRows: 5,maxRows: 10}" v-model="responseTemplate"></Input> -->
										<vue-json-editor 
			                            v-model="formItems.response" 
			                            :mode="'code'" 
			                            lang="zh"
			                            :show-btns="false"
			                            @json-change="onJsonChange"
			                            @has-error="onError"
			                            >    
			                            </vue-json-editor>
		                            </div>
							    </div>

							    <div class="temp_items">
				                    <Row style="margin: 10px 0;">
		                                <Col span="8">
		                                   <span class="temp_title">注意事项：</span>
		                                </Col>
		                                <Col span="6" offset="10">
		                                    
		                                </Col>
		                            </Row>
		                            <div class="items_body">
		                                <Input type="textarea" v-model="formItems.remark"></Input>
		                            </div>
							    </div>
							</Form>
						</div>
	                </div>
                </Content>
                
            </Layout>
        </Row>
		<div @click="toTop" class="ivu-back-top ivu-back-top-show" style="bottom: 30px; right: 30px;">
		  <div class="ivu-back-top-inner"><i class="ivu-icon ivu-icon-ios-arrow-up"></i></div>
		</div>
    </div>
</template>
<style scoped>
.scroll_panel{
	position: relative;

}
.menu_li{
	display: flex;
	-webkit-display:flex;
}
.menuname{
	color: #2d8cf0;
}
.weburl{
	color: #aaa; 
	font-size: 12px;
}
.links{
	width: 120px;
}
.form_items{
	display:flex;
	-webkit-display:flex;	
}
.form_subitem{
	margin:0 20px 0 0;
}
.temp_items{margin:10px 0;overflow: hidden;}
.temp_items .temp_title{font-weight: normal;}
.items_body{padding:8px 0 15px 0;}
.items_body pre{
    margin: 0;
    padding: 10px;
    border: 1px solid #d1d5da;
    border-radius: 5px;
    background-color: #f0f0f0;
    white-space: pre-wrap;
    max-height: 40vh;
    overflow: auto;
}
.viewapi_sublabel{
	padding:3px 0;
}
</style>
<style type="text/css">
.codesql {
font-size: 11pt;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
.viewapi_links .ivu-anchor-ink{display: none;}
.viewapi_links .ivu-anchor-wrapper{overflow: hidden;}
.viewapi_links .ivu-anchor-link{display: inline;padding: 8px 16px 8px 0;}
.viewapi_links .ivu-anchor-link .ivu-anchor-link-title{display: inline;cursor: pointer;}
.viewapi_links .ivu-anchor-link{font-weight: bold;}
.items_ul_flex ul li{display:flex;-webkit-display:flex;-moz-display:flex;}
.items_ul_flex ul li .ul_icon{width:80px;text-align: right;margin-right: 20px;}
.items_ul_flex ul li .ul_tit{width:150px;}
.menu_li .ivu-poptip-confirm .ivu-poptip-body{padding-left:8px!important;padding-right: 8px!important;}
.menu_li .ivu-poptip-confirm .ivu-poptip-body-message{color: #515a6e!important;}
.api_editpage .jsoneditor-poweredBy{display: none!important;}
.api_editpage .jsoneditor-modes{display: none!important;}
</style>
<script>
import { mapState, mapActions } from 'vuex'
import zmitiUtil from '../../../lib/util'
import jsonView from 'vue-json-views'
import { codemirror } from 'vue-codemirror'
import vueJsonEditor from 'vue-json-editor'
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),
        components:{
        	jsonView,
        	codemirror,
        	vueJsonEditor
        },
        data() {
            return {
            	code:'',
                modal1:false,
                resTemplate:'{code:0,data:{id:1,name:admin,email:123@126.com,role:管理员}',
                dataCount: 0,
                pageSize: 10,
                ajaxHttpData: [],
                xia: 0,
                codeList:[{//返回代码
                	label:'成功',
                	value:1
                },{
                	label:'失败',
                	value:201
                }], 
                modalParameters:false, 
                formParameters:{
                	name:'',
                	required:false,
                	type:'字符串',
                	des:''
                },          
                httpColumns: [
                    {
                        title: 'API名称',
                        key: 'name',
                        align: 'center'

                    },
                    {
                        title: '必选',
                        key: 'must',
                        align: 'center',
                        render: (h, params) => {
                            return h('Checkbox',{
                                props:{
                                    value:true
                                }
                            })
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        align: 'center'
                    },
                    {
                        title: '简介',
                        key: 'describe',
                        align: 'center'
                    }

                ],
                httpData: [
                    {
                        name:'id',
                        type:'String',
                        describe:''
                    },
                    {
                        name:'name',
                        type:'Object',
                        describe:''
                    },
                    {
                        name:'email',
                        type:'String',
                        describe:''
                    },
                    {
                        name:'role',
                        type:'Object',
                        describe:''
                    }
                ],
                ruleForm: {
                    name: '',
                    address: '',
                    type:'',
                    code:'',
                    describe:''
                },
                ruleValidate: {
                },
                modal_loading:false,
                websiteList:[],
                toggleStatus:false,
                menuindex:0,
 		        menuData:[],//左侧菜单data
		        modalapiname:false,
		        formItems:{
		        	name:'',
		        	desc:'',
		        	url:'',
		        	httpMethod:'POST',
		        	sqlTemplate:'',
		        	enabled:true,
		        	remark:'',
		        	frequency:60,
		        	parameters:[],//设置请求参数
		        	response:{},//设置响应参数
		        	codestatus:''
		        },
		        formItemsresponse:[],//设置响应参数
		        typeList:[{
	                value: 'GET',
	                label: 'GET'
                },{
	                value: 'POST',
	                label: 'POST'
                },{
	                value: 'PUT',
	                label: 'PUT'
                },{
	                value: 'DELETE',
	                label: 'DELETE'
                },{
	                value: 'OPTIONS',
	                label: 'OPTIONS'
                },{
	                value: 'PATCH',
	                label: 'PATCH'
                },{
	                value: 'HEAD',
	                label: 'HEAD'
                }],
                statusList:[{
                	value:200,
                	label:200
                },{
                	value:301,
                	label:301
                },{
                	value:403,
                	label:403
                },{
                	value:404,
                	label:404
                },{
                	value:500,
                	label:500
                },{
                	value:502,
                	label:502
                },{
                	value:503,
                	label:503
                },{
                	value:504,
                	label:504
                }],
                currentId:0,
                currentDetail:{
                    name:'',
                    des:'',
                    httpMethod:'',
                    frequency:'',
                    lastModified:'',
                    remark:''
                },
                dataSoure:[],
                condition:{
                    name:'',
                    url:'',
                    pageSize:10,
                    pageNO:0
                },
                requestsColumns:[
                    {
                        title: 'API名称',
                        key: 'name',
                        align: 'center'

                    },
                    {
                        title: '必选',
                        key: 'must',
                        align: 'center',
                        render: (h, params) => {
                            return h('Checkbox',{
                                props:{
                                    value:true
                                }
                            })
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        align: 'center'
                    },
                    {
                        title: '简介',
                        key: 'describe',
                        align: 'center'
                    }

                ],//编辑请求参数单元格
                requestsColumnsView:[
                    {
                        title: 'API名称',
                        key: 'name',
                        align: 'center'

                    },
                    {
                        title: '必选',
                        key: 'must',
                        align: 'center',
                        render: (h, params) => {
                            return h('Checkbox',{
                                props:{
                                    value:true,
                                    disabled:true
                                }
                            })
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        align: 'center'
                    },
                    {
                        title: '简介',
                        key: 'describe',
                        align: 'center'
                    }

                ],//查看请求参数单元格
                responseParams:[],//响应参数内容              
                responseColumns:[
                    {
                        title: '名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '必选',
                        key: 'must',
                        align: 'center',
                        render: (h, params) => {
                            return h('Checkbox',{
                                props:{
                                    value:true,
                                    disabled:true
                                }
                            })
                        }
                    },
                    {
                        title: '类型',
                        key: 'type',
                        align: 'center'
                    },
                    {
                        title: '简介',
                        key: 'describe',
                        align: 'center'
                    }

                ],//响应参数单元格
                requestsParams:[],//请求参数
                editQequestsParams:[],//编辑时表格中的请求参数
                paramsResponse:{},//编辑请求模板
                responseTemplate:'',//编辑响应模板
                editor:'',
                anchorList1:['SQL模板','请求参数','请求模板','响应参数','响应模板','注意事项'],
                cmOptions:{
                    value:'',
                    mode: 'text/x-mariadb',
                    indentWithTabs: true,
                    smartIndent: true,
                    lineNumbers: true,
                    matchBrackets: true,
                    extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
                    hintOptions: {//自定义提示选项
                        tables: {
                          users: ['name', 'score', 'birthDate'],
                          countries: ['name', 'population', 'size']
                        }
                    }
                }
            }
        },
        mounted() {
            this.currentId = this.$route.params.id;
            this.getDataList();
            this.getDetail();
            if(this.$route.params.status==1){                	
            	this.toggleStatus=true;
            }else{
            	this.toggleStatus=false;
            }
        },
        watch:{
            '$route.path':function(newVal,oldVal){
                console.log(newVal,"newVal");
                var _this = this;
                _this.getDataList();
                _this.currentId = _this.$route.params.id;
                /*let sqlTemplate = _this.currentDetail.sqlTemplate;
                _this.findrequestParams(sqlTemplate);*/
                if(_this.$route.params.status==1){                	
                	_this.toggleStatus=true;
                }else{
                	_this.toggleStatus=false;
                }
            },
            currentDetail(newVal,oldVal){
            	var _this = this;
            	let sqlTemplate = newVal.sqlTemplate;
            	//_this.getProps(sqlTemplate);
            	_this.findrequestParams(sqlTemplate);            	

            	_this.requestsParams=[];//清空
    			_this.editQequestsParams=[];//清空
    			_this.paramsResponse={}//清空

    			_this.formItems.response=newVal.response
            	if(newVal.parameters.length>0){//请求参数
                	_this.formItems.parameters=newVal.parameters
                	/*请求模板*/
                	newVal.parameters.map((item,index)=>{
                		_this.$set(_this.paramsResponse,item,'***')
                	})
                	console.log(_this.paramsResponse,'更新请求模板')
                }
            },
            toggleStatus(newVal){
            	if(newVal==true){//切换到“编辑”后重新加载sql编辑器配置，否则不显示
            		this.getDetail();//重新获取内容
            		this.cmOptions={
	                    value:'',
	                    mode: 'text/x-mariadb',
	                    indentWithTabs: true,
	                    smartIndent: true,
	                    lineNumbers: true,
	                    matchBrackets: true,
	                    extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
	                    hintOptions: {//自定义提示选项
	                        tables: {
	                          users: ['name', 'score', 'birthDate'],
	                          countries: ['name', 'population', 'size']
	                        }
	                    }
	                }
            	}
            }
        },
        methods: {
        	onJsonChange (value) {//json编辑器内容有更改时
                console.log('更改后的json:', value);
                this.formItems.response=value;
            },
            onError (value) {//json编辑器内容有错误时
                console.log('value:', value);
            },
        	toCreatapi(){//前往新建接口
        		this.$router.push('/postAPI')
        	},
			goAnchor(selector) {//滚动到指定位置
				console.log(selector,'内容ID');
				var anchor = this.$el.querySelector(selector)
				anchor.scrollIntoView(true)
				//document.documentElement.scrollTop = anchor.offsetTop
			},
			toTop(){//返回顶部
				let header =  document.querySelector(".page_all")
				header.scrollIntoView(true)
			},
        	openEditor(){//打开编辑
        		var _this = this;
        		//_this.toggleStatus=true;
        		let id = _this.$route.params.id;
        		if(_this.$route.params.status==0){
        			console.log(_this.formItems,'编辑前的内容');
        			this.$router.push({ name: 'ViewAPI', params: { id: id,status:1 } })
        		}else{
        			_this.toggleStatus=true;
        		}
        		//location.reload();
        	},
        	openmenu(id,status){//打开链接
                this.$router.push({ name: 'ViewAPI', params: { id: id,status:status } })
                console.log(id,'id==id')
                setTimeout(()=>{
                   this.getDetail();                   
            	},300)             
        	},
        	saveApi(){//保存接口
        		var _this = this;                
                var path='apiweb/modify';
                _this.findrequestParams(_this.formItems.sqlTemplate);
                //console.log('_this.responseTemplate',_this.responseTemplate);

                /**响应模板转为对象**/
                /*if(_this.responseTemplate!=''){
                	console.log(JSON.parse(_this.responseTemplate),'JSON_this.responseTemplate');
                	_this.formItems.response=JSON.parse(_this.responseTemplate);
                }*/               

                var postData = _this.formItems;
                postData.id = _this.$route.params.id;
                console.log(postData,'formItems=postData');
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;                   
                    if(res.data.code==1){
                    	_this.$Message.success('保存成功');
                    	_this.getDetail();                    	
                    }else{
                    	_this.$Message.error('保存失败')
                    }
                    this.$router.push({ name: 'ViewAPI', params: { id: postData.id,status:0 } })
                }).catch((error) => {
                    console.log(error,'error');
                });
        	},
        	deleteApi(id){//删除API
                var _this = this;                
                var path='apiweb/delete';
                var postData = {//参数
                    id
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;               
                    if (data.code==1) {
                        _this.$Message.success('删除成功!');
                        _this.getDataList();
                    }else{
                        console.log(res.data,'错误');
                        _this.$Message.error(data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            getDataList(){//列出所有接口
                var _this = this;                
                var path='apiweb/list';
                var postData = _this.condition;
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;               
                    if (data.results) {
                        _this.menuData=data.results;                   
                    }else{
                        console.log(res.data,'错误');
                        _this.$Message.error(data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            getDetail() {//根据id查询站点详细内容，然后填充到页面上 
                var _this = this;                
                var path='apiweb/view';
                var postData = {
                	id:this.$route.params.id
                }

                _this.formItemsresponse=[];
                _this.responseParams=[];//先清空响应参数，否则切换后会重复显示
                
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    /*查看赋值*/
                    _this.currentDetail= res.data; 
                    /*编辑赋值*/
                    _this.formItems= res.data;
                    if(!res.data.parameters){//请求参数
                    	_this.formItems.parameters=[];
                    }else{
                    	_this.formItems.parameters=res.data.parameters
                    	/*请求模板*/
                    	res.data.parameters.map((item,index)=>{
                    		_this.$set(_this.paramsResponse,item,'***')
                    	})
                    	console.log(_this.paramsResponse,'请求模板')
                    }

                    //响应参数与响应模板
                    if(!res.data.response){
                    	/*响应参数与响应模板都为空*/
                    	console.log('响应参数与响应模板都是空的')
                    	_this.formItemsresponse=[];
                    	_this.responseParams=[];//清空响应参数内容
                    }else{
                    	/*响应模板内容*/
                    	//_this.responseTemplate=JSON.stringify(res.data.response);
                    	//console.log(_this.responseTemplate,'响应模板内容')
                    	_this.formItems.response=res.data.response

                    	console.log(_this.formItems.response,'响应模板内容_this.formItems.response')
                    	if(JSON.stringify(res.data.response) == "{}"){
                    		/*当对象内容为空时清空内容*/
                    		_this.formItemsresponse=[];
                    		_this.responseParams=[];
                    	}else{

	                    	/*获取第一级索引*/
	                    	let resetResponseKey=[];
	                    	for(let item in res.data.response){
	                    		resetResponseKey.push(item);
	                    	}
	                    	_this.formItemsresponse=resetResponseKey;
	                    	console.log(_this.formItemsresponse,'响应参数索引');
	                    	/*响应参数内容*/
	                    	_this.formItemsresponse.map((item,index)=>{
	                    		_this.responseParams.push({
	                    			name:item,
	                    			must:true,
	                    			type:typeof(item),
	                    			describe:''
	                    		})
	                    		
	                    	})
	                    	console.log(_this.responseParams,'响应参数内容');
                    	}
                    }

                    console.log(_this.formItems,'getDetail')

                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            getProps(sqlTemplate){//根据sql语句获取请求参数
            	var _this = this;                
                var path='apiweb/parseSQLParameters';
                var postData = {
                	sqlTemplate
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    let requestsParams=[];
                    data.map((item,index)=>{
                    	requestsParams.push({
                    		desc: zmitiUtil.getBracketStr(item.name),
							name: zmitiUtil.getBracketStr(item.name),
							required: true,
							type: '字符串'
                    	})
                    })
                    _this.requestsParams=requestsParams;//查看请求参数赋值
                    _this.editQequestsParams=requestsParams;//编辑请求参数赋值
                }).catch((error) => {
                    console.log(error,'error');
                });
            },

            saveResponse(){//保存请求模板

            },
			findrequestParams(sqlTemplate){//更改sql语句后查找请求参数
				var _this = this;
            	let isWhere = sqlTemplate.toLowerCase().indexOf('where');//转为小写并获取where索引
            	console.log(sqlTemplate,'sqlTemplate',isWhere);
            	if(isWhere>0){
	            	let sqlwhere = _this.formItems.sqlTemplate.substring(isWhere);	            	
	            	let sqlarr=sqlwhere.match(/\{(.+?)\}/g);
	            	//console.log(sqlwhere,'sql条件语句')
	            	if(sqlarr!=null){
		            	console.log(sqlarr,'sqlarr');
		            	let requestsParams=[];
		            	let parametersArr=[];
	                    sqlarr.map((item,index)=>{
	                    	requestsParams.push({
	                    		desc: zmitiUtil.getBracketStr(item),
								name: zmitiUtil.getBracketStr(item),
								required: true,
								type: '字符串'
	                    	})
	                    	parametersArr.push(zmitiUtil.getBracketStr(item));
	                    })
	                    _this.requestsParams=requestsParams;//查看请求参数赋值
	                    _this.editQequestsParams=requestsParams;//编辑请求参数赋值

	                    _this.formItems.parameters=parametersArr;
                    }else{
                    	/*没有where条件时*/
                    	_this.requestsParams=[];//清空
                    	_this.editQequestsParams=[];//清空
                    	_this.paramsResponse={}//清空
                    }
            	}
			},
            
            
        }
    }
</script>